<template>
	<div>
		<Echart :options="options" id="pie_d" ref="pie_d" height="100%" width="100%"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					// this.options = {
					// 	legend: {
					// 		show: false
					// 	},
					// 	toolbox: {
					// 		show: false,
					// 	},
					// 	tooltip: {
					// 		trigger: 'item',
					// 		formatter: '{a} <br/>{b} : {c} ({d}%)',
					// 		position: 'top'
					// 	},
					// 	series: [{
					// 		name: newData.name,
					// 		type: 'pie',
					// 		radius: '50%',
					// 		data: newData.seriesData,
					// 		label: {
					// 			color: "#fff",
					// 			fontSize: 14
					// 		},
					// 		emphasis: {
					// 			itemStyle: {
					// 				shadowBlur: 10,
					// 				shadowOffsetX: 0,
					// 				shadowColor: 'rgba(0, 0, 0, 0.5)'
					// 			}
					// 		}
					// 	}]
					// };
					this.options = {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							show: false
						},
						series: [{
							name: '',
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['50%', '70%'],
							// adjust the start angle
							startAngle: 180,
							label: {
								show: true,
								formatter(param) {
									// correct the percentage
									return param.name + ' (' + param.percent * 2 + '%)';
								},
								color: '#ffffff'
							},

							data: [{
									value: 1500,
									name: '科技蓝',
									itemStyle: { //颜色值
										color: '#2dccff'
									}
								},
								{
									value: 500,
									name: '科技粉',
									itemStyle: { //颜色值
										color: '#ff32c1'
									}
								},
								{
									value: 100,
									name: '科技白',
									itemStyle: { //颜色值
										color: '#ffffff'
									}
								},
								{
									value: 1900,
									name: '自定义',
									itemStyle: { //颜色值
										color: '#ff462c'
									}
								},
								{
									value: 1000,
									name: '自定义',
									itemStyle: { //颜色值
										color: '#37ff53'
									}
								},
								
								{
									// make an record to fill the bottom 50%
									value: 5000,
									itemStyle: {
										// stop the chart from rendering this piece
										color: 'none',
										decal: {
											symbol: 'none',

										},
									},
									label: {
										show: false,
									},
								}
							]
						}]
					};
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

		}
	};
</script>

<style scoped>
</style>